<template>
  <div>
    <div style="position: relative" v-if="bigimg == 1">
      <img
        src="../../assets/images/PCduanbanner.jpg"
        alt=""
        style="width: 100%"
      />
      <a href="http://s.pdb2.com/l/1mkeEj28e2gBBMS" target="_blank"><div class="buy hover1"></div></a>
      <!-- <div class="iphone_download hover1"></div>
      <div class="android_download hover1"></div> -->
    </div>
    <div v-if="bigimg == 2">

      <a href="http://s.pdb2.com/l/1mkeEj28e2gBBMS" target="_blank">
            <img
        src="../../assets/images/shoujiduanbanner.jpg"
        alt=""
        style="width: 100%"
      />
      </a>
    </div>

    <div class="img_2">
      <div>
        <img src="../../assets/images/3-520x118px-ningquewulan.png" alt="" />
      </div>
    </div>
    <!-- 正品 -->

    <!-- 轮播图 -->
    <div class="lunbo-box">
      <div class="lunbo" :style="`left:${left}px`">
        <img
          src="../../assets/images/bb96b69c5ef5758f47c6b3e79a4655e.jpg"
          alt=""
          class="lunbo_img"
          ref="img"
        />
        <img
          src="../../assets/images/bb96b69c5ef5758f47c6b3e79a4655e.jpg"
          alt=""
          class="lunbo_img"
        />
      </div>
    </div>
    <div class="dash"></div>

    <div class="not-only">
      <div>
        <img src="../../assets/images/3-520x118px-ningquewulan.png" alt="" />
      </div>
    </div>
    <div class="bos">
      <div>
        <img src="../../assets/images/4-173x281px-1zheng.png" alt="" />
      </div>
      <div>
        <img src="../../assets/images/4-173x281px-2pin.png" alt="" />
      </div>
      <div>
        <img src="../../assets/images/4-173x281px-3shun.png" alt="" />
      </div>
      <div>
        <img src="../../assets/images/4-173x281px-4bao.png" alt="" />
      </div>
    </div>
    <!-- 可乐头条 -->
    <div class="news">
      <div style="margin-bottom: 30px" class="headnews">
        <img src="../../assets/images/keletoutiao.png" alt="" style="width: 30%" />
        <div @click="toTopNews" class="handnews_box">更多<span class="iconfont icon-gengduo"></span></div>
      </div>

      <div class="news-context">
        <!-- 通知 -->
        <div class="notice">
          <div
            class="notice_box hover1"
            @click="toNews(item.id)"
            v-for="item in newList"
            :key="item.id"
          >
            <div class="notice_img">
              <img :src="item.img" alt="" />
            </div>
            <div class="notice_text">
              <p class="warp2 text1">{{ item.title }}</p>
              <p class="text2">{{ item.summary }}</p>
            </div>
          </div>
        </div>
        <!-- 新闻列表 -->
        <div class="news-list">
          <a href="#/topNews" style="color: #000000">查看更多></a>
          <div class="news_list_item">
            <ul>
              <li
                v-for="(item, index) in newListTwo"
                :key="index"
                @click="toNews(item.id)"
                class="hover1"
              >
                <span>{{index+1}}</span>{{ item.title }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  data: () => {
    return {
      left: 50,
      isshow: false,
      windowWidth: document.documentElement.clientWidth,
      //  bigimg:1
      newList: [],
	  newListTwo: []
    };
  },
  methods: {
    //控制中间图片滚动
    carousel() {
      setInterval(() => {
        this.left = this.left - 1;
      }, 50);
    },
    //跳转新闻视图
    toNews(num) {
      this.$router.push({
        path: `news?id=`+num,
      });
    },
    //跳转泡饭咨询
    toTopNews(){
            this.$router.push({
        path: '/topNews'
      });
    },
   //跳转微信小程序

    //触发二维码显示
    downloadIsShow(a) {
      this.$bus.$emit("download", a);
    },
    async getNewList() {
      let a = await this.$api.getNewsList(1,13);
	  let b = a.data.data.splice(0,3)
      this.newList = b;
      this.newListTwo = a.data.data;
    },
  },
  computed: {
    bigimg: function () {
      if (this.windowWidth < 900) {
        return 2;
      } else {
        return 1;
      }
    },
  },
  watch: {
    left: function (newleft) {
      let widt = this.$refs.img.width;

      if (newleft < -widt) {
        this.left = 0;
      }
    },
    // windowWidth:function(newWidth){

    //   if(newWidth<800){
    //     this.bigimg=2
    //   }else{
    //     this.bigimg=1
    //   }
    //   console.log( this.$refs.img.width)
    // }
  },
  mounted: function () {
    this.getNewList();
    this.carousel();
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;
        this.windowHeight = window.fullHeight; // 高
        this.windowWidth = window.fullWidth; // 宽
      })();
    };
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: black;
}
li {
  list-style: none;
}

.nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
}
.buy {
  width: 315px;
  height: 80px;
  position: absolute;
  bottom: 12%;
  left: 35%;
}
.iphone_download {
  width: 268px;
  height: 70px;
  position: absolute;
  top: 642px;
  left: 340px;
}
.android_download {
  width: 268px;
  height: 70px;
  position: absolute;
  top: 730px;
  left: 340px;
}
.dash {
  width: 100%;
  height: 20px;
  background-color: #dde7ee;
}
.img_2 {
  /* display: flex;
  justify-content: center; */
  margin: 50px auto;
  text-align: center;
}
.img_2 div img {
  width: 50%;
}
.bos {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.bos div img {
  max-width: 50%;
}
.bos div {
  /* margin: 80px; */
  width: 20%;
  text-align: center;
}
.not-only {
  margin: 50px auto;
  text-align: center;
}
.not-only div img {
  width: 50%;
}

.lunbo {
  position: relative;
    width: 350%;
  /* animation: lunbo 20s; */
}
/* @keyframes lunbo{
  0% {left:0}
  100%{left:100%}
} */
/* .lunbo img {
  width: 2300px;
} */
.lunbo-box {
  /* height: 500px; */
  overflow: hidden;
  position: relative;

}
.lunbo_img {
  width: 50%;
}
.news {
  width: 70%;
  margin: 40px auto;
  /* height: 700px; */
}
.headnews{
  display:flex;
  justify-content: space-between;
  align-items: center;
font-weight: 800;
font-size: 16px;
}
.handnews_box{
display: none;
}
.news-context {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  height: 600px;
}
.notice {
  height: 90%;
  width: 70%;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 20px;
}
.notice_box {
  height: 31%;
  width: 100%;
  display: flex;
  box-shadow: 10px 5px 5px #bdc3c7;
  transition: transform 0.3s;
  box-sizing: border-box;
}
.notice_box:hover {
  transform: translate(3px, 3px);
}
.notice_img {
  height: 100%;
  width: 35%;
  overflow: hidden;
}
.notice_img img {
  height: 100%;
  width: 100%;
  /* position: relative;
  left: -50px; */
  object-fit: cover;
}
.notice_text {
  width: 60%;
  padding: 20px;
  box-sizing: border-box;

}
.text1 {
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 18px;
}
.text2 {
  color: #bdc3c7;
  font-size: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.news-list {
  height: 90%;
  width: 28%;
  float: right;
  padding: 20px;
  /* margin-right: 20px; */
  box-sizing: border-box;
  box-shadow: 10px 5px 5px #bdc3c7;
}
.news_list_item li {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #bdc3c7;
  margin: 20px;
  font-size: 15px;
}
.news_list_item li span {
  background-color: black;
  color: #ffffff;
  width: 20px;
  display: inline-block;
  text-align: center;
  margin-right: 10px;
}
.modelbuy{
width: 100;
}
.warp2{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
      }

@media screen and (max-width: 1255px) {
  .news {
    width: 80%;
  }
  .bos div {
    width: 50%;
  }
  .notice {
    width: 99%;
    height: 99%;
  }
  .news-context {
    height: 40vh;
  }
  .news-list {
    display: none;
  }
  .img_2 div img {
    width: 80%;
  }
  .not-only img {
    width: 80%;
  }
  .dash {
    height: 10px;
  }
   .notice_text h4{
    font-size: 14px;

  }
     .notice_text p{
    font-size: 12px;

  }
}
@media screen and (max-width: 900px) {
  .dash {
    display: none;
  }
  .not-only {
    display: none;
  }
  .bos {
    display: none;
  }
 .handnews_box{
   display: block;
 }
 .notice_img{
   width: 47%;

 }
 .notice_text{
   width: 53%;
 }
 .text1{
   font-size: 16px;
   margin-bottom: 10px;
 }
 .notice_text{
   padding: 10px;
 }
}
</style>
